<template>
  <div class="inputWrapper">
    <!-- 这里需要加:才能解析显示 -->
    <!-- :class="isOk?'':'error'" 可用三元表达式-->
    <input
      :class="{ error: !isOk }"
      :type="type"
      :placeholder="placeholder"
      v-model="value"
    />
  </div>
</template>

<script>
//手机号表达式:const prents=/^1[3456789]\d{9}$/
//^1以1开头,[3456789]或者其中一个数字,\匹配,d十进制1~10,{9}$九个数字结尾
export default {
  data() {
    return {
      value: "",
      isOk: true,
    };
  },
  props: ["placeholder", "type", "rule",],
  watch: {
    value(val) {
      if (this.rule.test(val)) {
        console.log(val);
        console.log("合法");
        this.isOk = true;
      } else {
        this.isOk = false;
        // this.$toast(this.errMsg);
      }
      //子组件发送数据
      this.$emit('Setvalue',val)
    },
  },
};
</script>
<style lang="less">
.inputWrapper {
  height: 60/360 * 100vw;
  input {
    line-height: 40/360 * 100vw;
    width: 100%;
    font-size: 16/360 * 100vw;
    outline: none;
    border: none;
    border-bottom: 1px solid gray;
    background-color: #f2f2f2;
  }
  .error {
    border-color: red;
  }
}
</style>